<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { uploadFile, editInfo } from '@/api/login'
	import { parseTime } from '@/utils/common'
	
	const user = useUserStore()
	const delta = ref(1)
	const loading= ref(false)
	const uForm = ref(null)
	const form = ref({
		userId: user.userId,
		phone: user.phone,
		avatar: user.avatar,
		nickname: user.nickname,
		gender: user.gender,
		birthday: parseTime(user.birthday, '{y}-{m}-{d}')
	})
	const rules = ref({
		avatar: [
			{type: 'object', required: true, message: '请选择头像', trigger: 'change'}
		],
		nickname: [
			{required: true, message: '请输入姓名', trigger: ['blur', 'change']}
		],
		gender: [
			{type: 'number', required: true, message: '请选择性别', trigger: ['blur', 'change']}
		],
		birthday: [
			{required: true, message: '请选择生日', trigger: ['blur', 'change']}
		]
	})
	
	function handleAvatar(e) {
		let url = e.detail.avatarUrl
		loading.value = true
		uploadFile({filename: '用户头像', filePath: url}).then(res => {
			form.value.avatar = res.result
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function birthdayChange(e) {
		let time = e.detail.value
		form.value.birthday = time
	}
	function submit() {
		uForm.value.validate().then(() => {
			loading.value = true
			let params = form.value
			delete params.phone
			editInfo(form.value).then(res => {
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
				setTimeout(() => {
					user.getInfoAction().then(() => {
						loading.value = false
						uni.navigateBack({delta: delta.value})
					}).catch(() => loading.value = false)
				}, 200)
			}).catch(() => loading.value = false)
		})
	}
	
	onLoad((option) => {
		delta.value = Number(option.delta || 1)
	})
</script>

<template>
	<view class="app-container">
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto">
			<view class="form-box">
				<view class="head">基础信息</view>
				<view class="content">
					<uv-form-item label="手机号码" prop="phone" borderBottom>
						<view class="custom-content">
							<text class="text-disable">{{form.phone}}(不可修改)</text>
						</view>
					</uv-form-item>
					<uv-form-item label="头像" prop="avatar" required borderBottom>
						<button class="uv-reset-button select-avatar" open-type="chooseAvatar" @chooseavatar="handleAvatar">
							<uv-avatar :src="form.avatar && form.avatar.furl" size="72"></uv-avatar>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</button>
					</uv-form-item>
					<uv-form-item label="姓名" prop="nickname" required borderBottom>
						<uv-input type="nickname" v-model="form.nickname" placeholder="请输入姓名" border="none" inputAlign="right" maxlength="32" clearable />
					</uv-form-item>
					<uv-form-item label="性别" prop="gender" required borderBottom>
						<view class="custom-content">
							<uv-radio-group v-model="form.gender" size="32" iconSize="28" labelSize="28" :customStyle="{flex: '0 0 auto'}">
								<uv-radio :name="0" label="男" ></uv-radio>
								<uv-radio :name="1" label="女" :customStyle="{marginLeft: '16rpx'}"></uv-radio>
							</uv-radio-group>
						</view>
					</uv-form-item>
					<uv-form-item label="生日" prop="birthday" required>
						<picker @change="birthdayChange" mode="date" :value="form.birthday">
							<view class="custom-content">
								<text :class="form.birthday? '' : 'text-no'">{{form.birthday? form.birthday : '请选择生日'}}</text>
								<uv-icon name="arrow-right" color="#54504D" size="30" />
							</view>
						</picker>
					</uv-form-item>
				</view>
			</view>
		</uv-form>
		<view class="form-bottom">
			<uv-button type="primary" text="保存" :custom-style="{width: '260rpx'}" @click="submit" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 160rpx;
		.form-box{
			padding: 0 24rpx;
			.head{
				margin: 24rpx 0;
				padding-left: 24rpx;
				border-left: 8rpx solid $uv-primary;
			}
			.content{
				background-color: #fff;
				padding: 0 20rpx;
				.custom-content{
					display: flex;
					justify-content: flex-end;
					gap: 10rpx;
				}
				.text-disable{
					color: #c0c4cc;
				}
				.text-no{
					color: #808080;
				}
				.select-avatar{
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 10rpx;
				}
				::v-deep .uv-form-item__body__left__content__required{
					left: unset;
					right: -8rpx;
				}
			}
		}
		.form-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 60rpx;
			display: flex;
			justify-content: center;
		}
	}
</style>